<template>
  <div class="nav-tree-group">
    <ul class="nav-tree">
      <li class="nav-tree-item" v-for="(item, index) in treeData" :key="index">
        <TreeNavItem :treeData="item" :level="level"></TreeNavItem>
      </li>
    </ul>
  </div>
</template>

<script>
import TreeNavItem from "./TreeNavItem.vue";
export default {
  name: "TreeNav",
  props: {
    /**
     * 树的数据结构
     */
    treeData: {
      type: Array,
      // default: [{ displayName: 'title' }]
    },
  },
  data() {
    return {
      level: 1,
    };
  },
  components: {
    TreeNavItem,
  },
};
</script>
<style>
.nav-tree-group {
  background-color: white;
}
.nav-tree {
  list-style-type: none;
  padding-left: 0;
}
.nav-tree-item {
  margin-bottom: 2px;
}
</style>
